<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/8/9
  Time: 15:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>登录页面</title>
    <!-- 2： 使用异步提交，并处理结果，此处选导入jquery -->
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<h2>登录页面</h2>
<hr/>
<!-- 登录表单提交的默认action的名字一定要叫 login, 当然，如果在spring-security.xml中修改了，则与修改的保持一致 -->
<form name="loginForm" id="loginForm" action="${pageContext.request.contextPath}/user_login" method="post">
    <c:if test="${not empty param.error}">
        <span style="color:red">用户名或密码错误</span>
    </c:if>
    <p>用户名：<input type="text" name="username" maxlength="18"/></p>
    <p>密 码：<input type="password" name="password" maxlength="18"/></p>
    <p>验证码：<input type="text" name="checkcode">&nbsp;
        <img src="${pageContext.request.contextPath}/checkcode"></p>
    <p>
    <!-- 利用Spring Security来实现 记住我 功能 -->
    <p>记住我:<input type="checkbox" name="remember-me" value="true"/></p>
        <%--<input type="submit" value="登录">--%>
        <input type="button" id="loginBtn" value="登录">
        <input type="reset" value="取消">
    </p>
</form>
<!-- 使用AJAX来发送登录请求 -->
<script>
    $(function () {
        //获取loginBtn并且绑定单击事件
        $("#loginBtn").click(function () {
            //发送AJAX请求
            $.post(
                "${pageContext.request.contextPath}/user_login",
                $("#loginForm").serialize(),
                function (data) {
                    //处理回调函数
                    if(data.success) {
                        alert("登录成功："+data.success);
                        window.location.href = "${pageContext.request.contextPath}/main";
                    } else {
                        //登录失败
                        alert("登录失败："+data.msg);
                    }
                },
                "json"
            );
        });
    });
</script>
</body>
</html>
